<script setup>
import {
  nextTick,
  onBeforeUnmount,
  onMounted,
  provide,
  reactive,
  ref,
  watch,
} from 'vue'
import { useElementVisibility } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import VHeader from '@/views/new-screen/components/header.vue'
import Layout from '@/views/new-screen/components/layout.vue'
import FullScreenContainer from '@/components/full-screen-container.vue'
import MapViewer from '@/components/map-viewer.vue'
import '@/utils/dynamicWallMaterialProperty.js'
import { useRouter } from 'vue-router'
import { usePopup } from '@/hooks/usePopup.js'
import axios from 'axios'
import { getHelper } from '@/utils/map/index.js'
import mitter from '@/utils/eventBus'

import gnss from '../../assets/imgs/ic_gnss.png'
import lfz from '../../assets/imgs/ic_lfz.png'
import qxy from '../../assets/imgs/ic_qxy.png'

import ggyq from '../../assets/imgs/img_ggyq_nor.png'
import ggyqSel from '../../assets/imgs/img_ggyq_sel.png'
import sltz from '../../assets/imgs/img_sltz_nor.png'
import sltzSel from '../../assets/imgs/img_sltz_sel.png'
import zcfgs from '../../assets/imgs/img_zcfgs_nor.png'
import zcfgsSel from '../../assets/imgs/img_zcfgs_sel.png'

import zyfzr from '../../assets/imgs/zyfzr_text.png'
import fgfzr from '../../assets/imgs/fgfzr_text.png'
import adb from '../../assets/imgs/adb_text.png'
import zhglb from '../../assets/imgs/zhglb_text.png'
import fzr from '../../assets/imgs/fzr_text.png'
import glry from '../../assets/imgs/glry_text.png'
import zsry from '../../assets/imgs/zsry_text.png'

import areaLeft from '../../assets/imgs/img_nr_nor.png'
import areaLeftSel from '../../assets/imgs/img_sz_sel.png'
import areaRight from '../../assets/imgs/img_d_nor.png'
import areaRightSel from '../../assets/imgs/img_d_sel.png'

import close from '@/assets/imgs/ic_gb_dialog.png'
import { parkPageList } from '@/api/manager/dataManage/park.js'
import AlarmEvent from './components/alarm-event.vue'
import MonitorPlayer from './components/monitor-player.vue'

let measure, _viewer, _layerManager

const mapId = 'one-map'

const popupRef = ref(null)

const popupRefVisible = useElementVisibility(popupRef)

const viewList = ref([
  // {
  //   id: 'caijia',
  //   name: '蔡家',
  // },
  // {
  //   id: 'xiema',
  //   name: '歇马',
  // },
  // {
  //   id: 'sanhuashi',
  //   name: '三花石',
  // },
  // {
  //   id: 'chengjiang',
  //   name: '澄江',
  // },
  // {
  //   id: 'dongyang',
  //   name: '东阳',
  // },
  // {
  //   id: 'nanan',
  //   name: '南岸',
  // },
  // {
  //   id: 'longfeng',
  //   name: '龙凤',
  // },
  // {
  //   id: 'sansheng',
  //   name: '三胜',
  // },
  // {
  //   id: 'shuitu',
  //   name: '水土',
  // },
])

const topMenu = ref({
  home: '主页',
  anfang: '安防',
  fangke: '访客',
  zichan: '资产',
  quyu: '区域',
})

const topMenuList = ref([
  {
    id: 'zonglan',
    name: '总览',
  },
  {
    id: 'anfang',
    name: '安防信息',
  },
  {
    id: 'fangke',
    name: '访客信息',
  },
  {
    id: 'zichan',
    name: '资产信息',
  },
  {
    id: 'quyu',
    name: '重点区域',
  },
])

let assetDeviceList = ref([
  {
    label: '倾斜仪',
    id: 'qingxie',
    img: qxy,
    isCheck: false,
    entities: [],
  },
  {
    label: 'GNSS监测一体机',
    id: 'gnss',
    img: gnss,
    isCheck: false,
    entities: [],
  },
  {
    label: '裂缝针',
    id: 'liefeng',
    img: lfz,
    isCheck: false,
    entities: [],
  },
])

const qxyPositions = ref([
  [106.50267889877305, 29.793468517068004],
  [106.50367889877315, 29.794468517068104],
])
const gnssPositions = ref([
  // [106.50467889877325, 29.795468517068114],
  // [106.50567889877335, 29.796468517068124],
  [106.40234595430915, 29.86343205069831],
])
const lfzPositions = ref([
  [106.50667889877345, 29.797468517068134],
  [106.50767889877355, 29.798468517068144],
])

let assetDevice = ref([])

let dispatchTabList = ref([
  {
    name: '四联投资',
    value: '21',
    bg: sltz,
    sel: sltzSel,
  },
  {
    name: '资产分公司',
    value: '105',
    bg: zcfgs,
    sel: zcfgsSel,
  },
  {
    name: '各个园区',
    value: '12',
    bg: ggyq,
    sel: ggyqSel,
  },
])

let sltzList = ref([
  {
    title: zyfzr,
    width: 85,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: fgfzr,
    width: 120,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: adb,
    width: 51,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
])

let zcfgsList = ref([
  {
    title: zyfzr,
    width: 85,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: fgfzr,
    width: 120,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: adb,
    width: 51,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: zhglb,
    width: 85,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
])

let ggyqList = ref([
  {
    title: fzr,
    width: 50,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: glry,
    width: 68,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
  {
    title: zsry,
    width: 68,
    phoneList: [
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
      {
        name: '徐某某',
        phone: '183 4561 561',
      },
    ],
  },
])

let dispatchTabActive = ref(1)

let zcfgsScrollbarRef = ref()

const active = ref('')

const positionLabel = ref('')

const modelActive = ref('home')

const areaActive = ref('')

const handleChangeMenu = (item) => {
  if (active.value !== item.id) {
    mitter.emit('switchPark', item.name)
  }
  active.value = item.id
  modelActive.value = 'zonglan'
  positionLabel.value = item.name
  if (active.value != 'caijia') {
    topMenuList.value = [
      {
        id: 'zonglan',
        name: '总览',
      },
      {
        id: 'anfang',
        name: '安防信息',
      },
      {
        id: 'zichan',
        name: '资产信息',
      },
      {
        id: 'quyu',
        name: '重点区域',
      },
    ]
  } else {
    topMenuList.value = [
      {
        id: 'zonglan',
        name: '总览',
      },
      {
        id: 'anfang',
        name: '安防信息',
      },
      {
        id: 'fangke',
        name: '访客信息',
      },
      {
        id: 'zichan',
        name: '资产信息',
      },
      {
        id: 'quyu',
        name: '重点区域',
      },
    ]
  }
}
const handleTopMenuChange = (item) => {
  modelActive.value = item.id
  if (modelActive.value != 'zichan') {
    assetDeviceList.value.forEach((data) => {
      data.isCheck = false
      if (data.entities.length) {
        data.entities.forEach((item) => {
          _viewer.entities.remove(item)
        })
      }
    })
  }
}

const mapLoad = (viewerId, viewer) => {
  viewer.screenSpaceEventHandler.setInputAction((movement) => {
    const pick = viewer.scene.pick(movement.position)
    if (
      window.Cesium.defined(pick) &&
      pick.id instanceof window.Cesium.Entity &&
      pick.id.id === '__sanhuashi_gnss'
    ) {
      const ray = viewer.camera.getPickRay(movement.position)
      _clickedCartesian = viewer.scene.globe.pick(ray, viewer.scene)
      if (popupRefVisible.value) {
        return
      } else {
        popupRef.value.style.display = 'flex'
      }
      viewer.scene.postRender.addEventListener(updatePosition)
    } else if (
      window.Cesium.defined(pick) &&
      pick.id instanceof window.Cesium.Entity &&
      pick.id.id.startsWith('monitor__')
    ) {
      const data = pick.id.__data
      if (data && data.meta) {
        if (data.meta.hls) {
          // 萤石云播放
          // console.log('萤石云播放')
          monitorPlayerRef.value.setMetaData(data.meta)
          showMonitorPlayer.value = true
        } else {
          // 普通播放
          // console.log('普通播放')
          monitorPlayerRef.value.setMetaData(data.meta)
          showMonitorPlayer.value = true
        }
      }
    }
  }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

const mapUnload = (viewerId, viewer) => {
  viewer.screenSpaceEventHandler.removeInputAction(
    window.Cesium.ScreenSpaceEventType.LEFT_CLICK,
  )
}

const popupInfo = {
  型号: 'SC-M360',
  监测精度: '水平：2.5mm+1ppm RMS，垂直：5mm+1ppm RMS',
  姿态精度: '0.05°',
  采样间隔: '0S~24h',
  上传间隔: '0S~72h',
  输出信号: 'NB-LOT/4/5G',
  工作模式: 'BDS+GPS+GLONASS+Galileo/四星十频以上',
  数据格式: '支持RTCM32原始数据及实时动态结果数据上传',
  抗干扰: '具备抑制GNSS信号频带内潜在的窄带和单音无线电干扰信号，干信比可达50d',
  功耗: '在采样间隔不低于15s且上传间隔不低于15s情况下，接收机正常工作平均功耗≤2W',
  工作温度: '-40~70℃',
  防护等级: 'IP68及以上',
}

let _clickedCartesian

const updatePosition = () => {
  const windowPosition = window.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    _viewer.scene,
    _clickedCartesian,
  )
  if (windowPosition) {
    popupRef.value.style.left = windowPosition.x + 'px'
    popupRef.value.style.top = windowPosition.y + 'px'
  }
}

const handlePopupClose = () => {
  popupRef.value.style.display = 'none'
}

watch(
  () => popupRefVisible.value,
  (val) => {
    if (!val) {
      _viewer.scene.postRender.removeEventListener(updatePosition)
    }
  },
)

let bottomHide = ref(false)

const mapOption = {
  animation: false, //是否显示动画控件，左下角仪表
  baseLayerPicker: false, //是否显示图层选择控件,是否显示geocoder小器件，右上角查询按钮
  geocoder: false, //是否显示地名查找控件
  timeline: false, //是否显示时间线控件
  sceneModePicker: false, //是否显示投影方式控件,//是否显示3D/2D选择器
  navigationHelpButton: false, //是否显示帮助信息控件
  infoBox: false, //是否显示点击要素之后显示的信息
  fullscreenButton: false, //是否显示全屏按钮
  selectionIndicator: false, //是否显示选中指示框
  homeButton: false, //是否显示Home按钮
  contextOptions: {
    maxDrawingBufferWidth: window.innerWidth,
    maxDrawingBufferHeight: window.innerHeight,
    webgl: {
      preserveDrawingBuffer: true, //此处为true，即可
    },
  },
}

provide('mapId', mapId)

const { clear } = usePopup()
const router = useRouter()
const handleChangeRouter = () => {
  clear()
  router.replace('/')
}
const timeInfo = reactive({
  currentTime: '',
  currentDate: '',
  currentDay: '',
})
const updateTime = () => {
  const now = new Date()
  timeInfo.currentTime = now.toLocaleTimeString() // 获取当前时间，格式化为本地时间字符串
  timeInfo.currentDate = now.toLocaleDateString() // 获取当前日期，格式化为本地日期字符串
  timeInfo.currentDay = now.toLocaleString('zh-CN', { weekday: 'long' }) // 获取当前星期，格式化为本地星期字符串
}

updateTime()

const getWeather = () => {
  axios
    .get(
      `https://restapi.amap.com/v3/weather/weatherInfo?city=500109&extensions=base&key=434f2186ba36abd526a6ac201f0470fc`,
      // {responseType: 'json'}
      // { headers:{'jwt':jwt} }
    )
    .then((result) => {
      const data = result.data
      console.log(data)
    })
}

const homeClick = () => {
  modelActive.value = 'home'
  active.value = ''
  positionLabel.value = ''
}

getWeather()

let showDispatch = ref(false)

let menuScrollbarRef = ref()
let menuScroll = ref(0)

const showAlarmEvent = ref(false)

const alarmEventRef = ref()

const showMonitorPlayer = ref(false)

const monitorPlayerRef = ref()

const menuLeft = () => {
  let num = menuScroll.value % 118
  if (menuScroll.value > 0) {
    menuScroll.value -= num || 118
    menuScrollbarRef.value.setScrollLeft(menuScroll.value)
  } else {
    ElMessage.warning('已经到头了')
  }
}
const menuRight = () => {
  let max = viewList.value.length * 118 - 720
  let num = menuScroll.value % 118
  if (menuScroll.value < max) {
    menuScroll.value += 118 - num
    menuScrollbarRef.value.setScrollLeft(menuScroll.value)
    console.log(menuScroll.value)
  } else {
    ElMessage.warning('已经到头了')
  }
}

let areaScrollbarRef = ref()
let areaScroll = ref(0)

const areaTop = () => {
  let num = areaScroll.value % 60
  if (areaScroll.value > 0) {
    areaScroll.value -= num || 60
    areaScrollbarRef.value.setScrollTop(areaScroll.value)
  } else {
    ElMessage.warning('已经到头了')
    return
  }
}
const areaBottom = () => {
  let max = viewList.value.length * 60 - 312
  let num = areaScroll.value % 60
  if (areaScroll.value < max) {
    areaScroll.value += 60 - num
    areaScrollbarRef.value.setScrollTop(areaScroll.value)
    console.log(areaScroll.value)
  } else {
    ElMessage.warning('已经到头了')
    return
  }
}

const assetChange = (val, data) => {
  console.log(val, data)
  if (data.id == 'qingxie') {
    if (val) {
      qxyPositions.value.forEach((item) => {
        const entity = _viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(...item),
          billboard: {
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            image: 'img/bt_qxy.png',
            scale: 0.4,
          },
        })
        data.entities.push(entity)
      })
    } else {
      if (data.entities.length) {
        data.entities.forEach((e) => {
          _viewer.entities.remove(e)
        })
      }
      data.entities = []
    }
  } else if (data.id === 'gnss') {
    if (val) {
      gnssPositions.value.forEach((item) => {
        const entity = _viewer.entities.add({
          id: '__sanhuashi_gnss',
          position: window.Cesium.Cartesian3.fromDegrees(...item, 10),
          billboard: {
            verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
            image: 'img/bt_gnss.png',
            scale: 0.4,
            heightReference: window.Cesium.HeightReference.RELATIVE_TO_GROUND,
          },
        })
        data.entities.push(entity)
      })
    } else {
      if (data.entities.length) {
        data.entities.forEach((e) => {
          _viewer.entities.remove(e)
        })
      }
      data.entities = []
    }
  } else if (data.id == 'liefeng') {
    if (val) {
      lfzPositions.value.forEach((item) => {
        const entity = _viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(...item),
          billboard: {
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            image: 'img/bt_lfz.png',
            scale: 0.4,
          },
        })
        data.entities.push(entity)
      })
    } else {
      if (data.entities.length) {
        data.entities.forEach((e) => {
          _viewer.entities.remove(e)
        })
      }
      data.entities = []
    }
  }
}

const timer = setInterval(updateTime, 1000)

let scrollCount = ref(0)

const toLeft = () => {
  scrollCount.value = 0
  zcfgsScrollbarRef.value.setScrollLeft(0)
}

const toRight = () => {
  scrollCount.value = 100
  zcfgsScrollbarRef.value.setScrollLeft(100)
}

onBeforeUnmount(() => {
  clearInterval(timer)

  mitter.off('clickBillboard')
  mitter.off('showAlarmEvent')
})

const getParkList = () => {
  parkPageList({
    pageSize: 999,
  }).then((res) => {
    if (res.success) {
      viewList.value =
        res.data?.list?.map((item) => {
          return {
            name: item.name,
            id: item.pkid,
          }
        }) || []
    } else {
      ElMessage.error(res.message)
    }
  })
}

const onBillboardClick = (label) => {
  const find = viewList.value.find((item) => item.name === label)
  if (find) {
    handleChangeMenu(find)
  }
}

const onShowAlarmEvent = (parkId) => {
  console.log('show alarm event', parkId)
  showAlarmEvent.value = true
  nextTick(() => {
    alarmEventRef.value?.setParkId(parkId || '')
  })
}

onMounted(async () => {
  const { map, layerManager } = await getHelper(mapId)
  _viewer = map
  measure = new Cesium.Measure(map)
  _layerManager = layerManager
  getParkList()

  mitter.on('clickBillboard', onBillboardClick)
  mitter.on('showAlarmEvent', onShowAlarmEvent)
})

provide('parkList', viewList)
</script>

<template>
  <map-viewer
    :options="mapOption"
    :map-id="mapId"
    :remove-default-basemap="true"
    @map-load="mapLoad"
    @map-unload="mapUnload"
  />
  <full-screen-container
    :options="{
      width: 1920,
      height: 1080,
    }"
  >
    <div class="screen">
      <v-header />
      <div class="time-info">
        <!-- <span class="icon">
          <SvgIcon name="qin" size="24px" />
        </span> -->
        <div class="time">{{ timeInfo.currentTime }}</div>
        <div>
          <div class="week">
            {{ timeInfo.currentDay }}
          </div>
          <div class="week">
            {{ timeInfo.currentDate }}
          </div>
        </div>
      </div>
      <div class="weather-info">
        <span>当前位置：
          <span>{{ topMenu[modelActive] }}</span>
          <span v-show="positionLabel">/{{ positionLabel }}</span>
        </span>
        <img src="../../assets/imgs/bt_sy_top.png" />
        <!-- <span class="icon">
          <SvgIcon name="qin" size="24px" />
        </span>
        <span class="temperature">28℃</span> -->
      </div>
      <!-- <el-button class="glpt-button" @click="handleChangeRouter">
        <span class="glpt"></span>
      </el-button>
      <el-button class="yjdd-button" @click="showDispatch = true">
        <span class="yjdd"></span>
      </el-button> -->

      <div class="top-button" v-show="modelActive != 'home'">
        <div
          :class="['menu-item', modelActive === item.id ? 'menu-active' : '']"
          v-for="item in topMenuList"
          :key="item.id"
          @click="handleTopMenuChange(item)"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>

      <layout
        v-if="modelActive"
        :menuActive="modelActive"
        :activePark="active"
      />

      <div
        class="asset-bottom"
        v-show="modelActive == 'zichan'"
        :style="{ bottom: bottomHide ? '-50px' : '125px' }"
      >
        <!-- <el-checkbox-group v-model="assetDevice"> -->
        <div
          class="asset-bottom-item"
          v-for="item in assetDeviceList"
          :key="item.id"
        >
          <el-checkbox
            :label="item.label"
            v-model="item.isCheck"
            @change="
              (val) => {
                assetChange(val, item)
              }
            "
          >
            <img :src="item.img" />
            <span class="label">{{ item.label }}</span>
          </el-checkbox>
        </div>
        <!-- </el-checkbox-group> -->
      </div>
      <div
        class="bottom-button"
        :style="{ bottom: bottomHide ? '-50px' : '50px' }"
      >
        <div
          :class="modelActive == 'home' ? 'home' : 'home-no-active'"
          @click="homeClick"
        ></div>
        <div class="arrow arrow-left" @click="menuLeft"></div>
        <!-- <div class="menus"> -->
        <el-scrollbar ref="menuScrollbarRef">
          <div class="menu">
            <div
              :class="['menu-item', active === item.id ? 'active' : '']"
              v-for="item in viewList"
              :key="item.id"
              @click="handleChangeMenu(item)"
            >
              <span :class="['icon', item.id]">{{ item.name }}</span>
            </div>
          </div>
        </el-scrollbar>
        <!-- </div> -->
        <div class="arrow arrow-right" @click="menuRight"></div>
      </div>
      <div class="bottom" :class="bottomHide ? 'bottom-sq' : ''"></div>
      <div class="bottom-click" @click="bottomHide = !bottomHide"></div>
      <!-- 应急调度窗口 -->
      <div class="dispatch" v-show="showDispatch">
        <div class="dispatch-content">
          <div class="dispatch-content-title"></div>
          <div
            class="dispatch-content-close"
            @click="showDispatch = false"
          ></div>
          <div class="dispatch-content-tab">
            <div
              class="dispatch-content-tab-item"
              v-for="(item, index) in dispatchTabList"
              :key="index"
              :class="dispatchTabActive == index ? 'isActive' : ''"
              :style="{
                backgroundImage:
                  dispatchTabActive == index
                    ? `url(${item.sel})`
                    : `url(${item.bg})`,
              }"
              @click="dispatchTabActive = index"
            >
              <span>{{ item.name }}</span>
              <span>{{ item.value }}</span>
            </div>
          </div>
          <div class="dispatch-content-sltz" v-show="dispatchTabActive == 0">
            <div
              style="
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
              "
            >
              <div
                class="dispatch-content-sltz-item"
                v-for="(item, index) in sltzList"
                :key="index"
              >
                <img
                  class="dispatch-content-sltz-item-title"
                  :src="item.title"
                  :style="{ width: item.width + 'px' }"
                />
                <div class="dispatch-content-sltz-item-phone">
                  <el-scrollbar>
                    <div
                      class="dispatch-content-sltz-item-phone-line"
                      v-for="(i, idx) in item.phoneList"
                      :key="idx"
                    >
                      <div class="point"></div>
                      <div class="name">{{ i.name }}</div>
                      <div class="phone">{{ i.phone }}</div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>

          <div class="dispatch-content-sltz" v-show="dispatchTabActive == 1">
            <el-scrollbar ref="zcfgsScrollbarRef">
              <div style="height: 100%; width: 100%; display: flex">
                <div
                  class="dispatch-content-sltz-item"
                  v-for="(item, index) in zcfgsList"
                  :key="index"
                >
                  <img
                    class="dispatch-content-sltz-item-title"
                    :src="item.title"
                    :style="{ width: item.width + 'px' }"
                  />
                  <div class="dispatch-content-sltz-item-phone">
                    <el-scrollbar>
                      <div
                        class="dispatch-content-sltz-item-phone-line"
                        v-for="(i, idx) in item.phoneList"
                        :key="idx"
                      >
                        <div class="point"></div>
                        <div class="name">{{ i.name }}</div>
                        <div class="phone">{{ i.phone }}</div>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <div class="arrows">
              <img
                v-if="scrollCount == 100"
                src="../../assets/imgs/ic_z_sel.png"
                @click="toLeft"
              />
              <img
                v-if="scrollCount == 0"
                src="../../assets/imgs/img_zjt_nor.png"
                @click="toLeft"
              />
              <img
                v-if="scrollCount == 100"
                src="../../assets/imgs/img_yjt_nor.png"
                @click="toRight"
              />
              <img
                v-if="scrollCount == 0"
                src="../../assets/imgs/img_yjt_sel.png"
                @click="toRight"
              />
            </div>
          </div>
          <div class="dispatch-content-ggyq" v-show="dispatchTabActive == 2">
            <div class="dispatch-content-ggyq-area">
              <img
                class="arrow"
                src="../../assets/imgs/bt_jt_s.png"
                @click="areaTop"
              />
              <el-scrollbar ref="areaScrollbarRef">
                <div class="area-list">
                  <div
                    class="area-list-item"
                    v-for="(item, index) in viewList"
                    :key="index"
                    @click="areaActive = item.id"
                  >
                    <div
                      class="area-list-item-left"
                      :style="{
                        backgroundImage:
                          areaActive == item.id
                            ? `url(${areaLeftSel})`
                            : `url(${areaLeft})`,
                      }"
                    ></div>
                    <div
                      class="area-list-item-right"
                      :style="{
                        backgroundImage:
                          areaActive == item.id
                            ? `url(${areaRightSel})`
                            : `url(${areaRight})`,
                      }"
                    >
                      <span
                        :style="{
                          color: areaActive == item.id ? '#FFC152' : '#fff',
                        }"
                        >{{ item.name }}</span
                      >
                    </div>
                  </div>
                  <div class="line"></div>
                </div>
              </el-scrollbar>
              <img
                class="arrow"
                src="../../assets/imgs/bt_jt_x.png"
                @click="areaBottom"
              />
            </div>
            <div class="dispatch-content-ggyq-info">
              <div
                class="dispatch-content-sltz-item"
                v-for="(item, index) in ggyqList"
                :key="index"
              >
                <img
                  class="dispatch-content-sltz-item-title"
                  :src="item.title"
                  :style="{ width: item.width + 'px' }"
                />
                <div class="dispatch-content-sltz-item-phone">
                  <el-scrollbar>
                    <div
                      class="dispatch-content-sltz-item-phone-line"
                      v-for="(i, idx) in item.phoneList"
                      :key="idx"
                    >
                      <div class="point"></div>
                      <div class="name">{{ i.name }}</div>
                      <div class="phone">{{ i.phone }}</div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 报警事件窗口 -->
      <AlarmEvent
        ref="alarmEventRef"
        v-show="showAlarmEvent"
        @close="() => (showAlarmEvent = false)"
      />

      <MonitorPlayer
        v-show="showMonitorPlayer"
        ref="monitorPlayerRef"
        @close="() => (showMonitorPlayer = false)"
      />

      <!-- :class="bottomHide ? 'bottom-sq' : ''" @click="bottomHide = !bottomHide" -->
    </div>
  </full-screen-container>

  <div ref="popupRef" id="sanhuashi_gnss">
    <div class="header">
      <span>设备名称: GNSS</span>

      <img alt="close" :src="close" @click="handlePopupClose" />
    </div>

    <div class="body">
      <el-scrollbar>
        <div
          class="info"
          v-for="item in Object.entries(popupInfo)"
          :key="item[0]"
        >
          <span class="title">{{ item[0] }}：</span>
          <span class="value">{{ item[1] }}</span>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/styles/font';

#full-screen-container {
  pointer-events: none;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  --hedaer-height: 80px;
  --layout-padding-left: 24px;
  --layout-padding-bottom: 28px;

  .bottom-click {
    width: 1000px;
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    bottom: 0px;
    display: flex;
    pointer-events: auto;
    align-items: center;
    cursor: pointer;
  }

  .top-button {
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    top: 150px;
    display: flex;
    pointer-events: auto;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/img_d_top.png');
    padding-left: 10px;
    padding-right: 10px;

    .menu-item {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #c4eaff;
      line-height: 40px;
      height: 40px;
      width: 120px;
      font-style: italic;
      text-align: center;
      cursor: pointer;
    }

    .menu-active {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/tab_sel_top.png');
    }
  }

  .bottom-button {
    width: 900px;
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    bottom: 50px;
    display: flex;
    pointer-events: auto;
    align-items: center;
    transition: all 1s;

    .home {
      height: 80px;
      width: 80px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_sy.png');
      cursor: pointer;
    }

    .home-no-active {
      height: 80px;
      width: 80px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_sy.png');
      cursor: pointer;
    }

    .arrow {
      width: 36px;
      height: 60px;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      &-left {
        background-image: url('@/assets/imgs/bt_z.png');
        cursor: pointer;
      }

      &-right {
        background-image: url('@/assets/imgs/bt_y.png');
        cursor: pointer;
      }
    }

    .menus {
      width: 720px;
      // display: block;
      // overflow: hidden;
    }

    .menu {
      width: 720px;
      height: 40px;
      display: flex;
      align-items: center;
      // overflow: hidden;
    }

    .menu-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 114px;
      // height: 30px;
      margin-right: 4px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: white;
      background-image: url('@/assets/imgs/bt_yq_nor.png');
      text-align: center;
      font-size: 20px;
      font-family: YouSheBiaoTiHei;

      span {
        position: relative;
        bottom: 10px;
      }

      &.active {
        background-image: url('@/assets/imgs/bt_yq_sel.png');
        color: #ffc152;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .time-info {
    position: absolute;
    z-index: 2001;
    left: 24px;
    top: 40px;
    width: 255px;
    height: 24px;
    display: flex;
    align-items: center;

    .icon {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }

    .time {
      font-family: DIN;
      color: #ffffff;
      font-weight: bold;
      font-size: 24px;
      margin-right: 10px;
    }

    .week {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fefefe;
      text-align: right;
      line-height: 20px;
    }
  }

  .weather-info {
    z-index: 2001;
    width: 240px;
    height: 30px;
    position: absolute;
    right: var(--layout-padding-left);
    top: 38px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 16px;
    color: #68f2fe;
    display: flex;
    align-items: center;
    padding-left: 20px;
    justify-content: space-around;

    img {
      height: 34px;
      width: 34px;
    }
  }

  .glpt-button {
    position: absolute;
    z-index: 2222;
    top: 38px;
    right: 225px;
    margin-right: 25px;
    width: 99px;
    height: 32px;
    border: none;
    background: url('@/assets/imgs/bt_glpt.png') 100% 100% no-repeat;
    //cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;

    .glpt {
      width: 64px;
      height: 32px;
      background: url('@/assets/imgs/glpt_text.png') 100% 100% no-repeat;
    }
  }

  .yjdd-button {
    position: absolute;
    z-index: 2222;
    top: 38px;
    right: 335px;
    margin-right: 25px;
    width: 99px;
    height: 32px;
    border: none;
    background: url('@/assets/imgs/bt_glpt.png') 100% 100% no-repeat;
    //cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    color: #fff;

    .yjdd {
      width: 60px;
      height: 12px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/yjdd_text.png');
    }
  }

  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/down.png');
    pointer-events: none;
  }

  .bottom-sq {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/down_sq.png');
    pointer-events: none;
  }

  .asset-bottom {
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 125px;
    width: 420px;
    height: 40px;
    transition: all 1s;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/asset_device_bg.png');
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    // :deep(.el-checkbox-group) {
    //   height: 100%;
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-around;
    //   align-items: center;
    // }

    :deep(.el-checkbox__label) {
      display: flex;
      align-items: center;
    }

    &-item {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;

      img {
        height: 20px;
        width: 20px;
        margin-right: 6px;
      }

      .label {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }

  .dispatch {
    z-index: 3333;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;

    &-content {
      width: 970px;
      height: 650px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/dispatch_bg.png');
      position: relative;

      &-title {
        width: 77px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/yjdd_text.png');
        position: absolute;
        left: 25px;
        top: 40px;
      }

      &-close {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/ic_gb_dialog.png');
        position: absolute;
        right: 30px;
        top: 40px;
        cursor: pointer;
      }

      &-tab {
        display: flex;
        margin-top: 87px;
        margin-right: 38px;
        margin-left: 38px;
        width: calc(100% - 76px);
        justify-content: space-between;

        &-item {
          width: 255px;
          height: 80px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding-left: 93px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 26px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #c4eaff;
          cursor: pointer;

          span:last-child {
            font-weight: bold;
            font-size: 24px;
          }
        }

        .isActive {
          color: #ffffff;

          span:last-child {
            font-weight: bold;
            font-size: 24px;
            color: #ffc152;
          }
        }
      }

      &-sltz {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 200px);
        width: 90%;
        margin-left: 5%;
        overflow: hidden;
        position: relative;

        &-item {
          display: flex;
          flex-shrink: 0;
          flex-direction: column;
          align-items: center;
          width: 226px;
          height: 390px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url('@/assets/imgs/sltz_img_d.png');
          margin: 10px;

          &-title {
            height: 14px;
            margin-top: 20px;
          }

          &-phone {
            margin-top: 14px;
            width: 100%;
            height: calc(100% - 30px);
            overflow: hidden;

            &-line {
              display: flex;
              align-items: center;
              width: calc(100% - 14px);
              height: 32px;
              background: rgba($color: #0c2547, $alpha: 0.65);
              border-radius: 8px;
              margin-left: 7px;
              margin-right: 7px;
              position: relative;
              margin-bottom: 10px;

              .point {
                width: 7px;
                height: 7px;
                background: #68f2fe;
                transform: rotate(45deg);
                margin-left: 6px;
              }

              .name {
                font-family: Source Han Sans SC;
                font-weight: 400;
                font-size: 12px;
                color: #b8e1f9;
                margin-left: 10px;
              }

              .phone {
                font-family: Source Han Sans SC;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
                position: absolute;
                right: 10px;
              }
            }
          }
        }

        .arrows {
          position: absolute;
          width: 100px;
          height: 40px;
          display: flex;
          justify-content: space-between;
          bottom: 20px;
          left: calc(50% - 50px);

          img {
            width: 40px;
            height: 40px;
            cursor: pointer;
          }
        }
      }

      &-ggyq {
        height: calc(100% - 200px);
        width: 90%;
        margin-left: 5%;
        overflow: hidden;
        position: relative;
        display: flex;

        &-area {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding-bottom: 20px;

          .arrow {
            height: 30px;
            width: 30px;
            cursor: pointer;
          }

          .area-list {
            flex: 1;
            position: relative;

            .line {
              position: absolute;
              height: 100%;
              width: 4px;
              background: rgba($color: #fff, $alpha: 0.05);
              top: 0px;
              left: 13px;
            }

            &-item {
              z-index: 4444;
              display: flex;
              flex-shrink: 0;
              align-items: center;
              cursor: pointer;
              height: 70px;

              &-left {
                width: 30px;
                height: 30px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              &-right {
                width: 66px;
                height: 13px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                text-align: center;

                span {
                  font-family: YouSheBiaoTiHei;
                  font-weight: bold;
                  font-size: 18px;
                  position: relative;
                  bottom: 12.5px;
                }
              }
            }
          }
        }

        &-info {
          display: flex;
        }
      }
    }
  }
}

.map-viewer {
  width: 100%;
  height: 100%;
}

#sanhuashi_gnss {
  height: 450px;
  width: 300px;
  display: none;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: rgba(22, 44, 74, 0.5);
  border: 2px solid rgb(84, 209, 253);
  z-index: 99999;
  pointer-events: all;

  .header {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(84, 209, 253, 0.3);

    span {
      padding-right: 2px;
      font-family: YouSheBiaoTiHei;
      font-weight: 600;
      font-size: 18px;
      font-style: italic;
      color: #ffffff;
      background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    :deep(.info) {
      padding: 10px;
      display: flex;
      align-items: center;

      &:first-of-type {
        padding-bottom: 0;
      }

      &:last-of-type {
        padding-top: 0;
      }

      & > span {
        color: white;
      }

      .title {
        width: 85px;
        flex-shrink: 0;
      }

      .value {
        flex: 1;
        flex-shrink: 1;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
</style>
